<!--
 * @Author: 周洋 1430536748@qq.com
 * @Date: 2024-08-10 13:32:51
 * @LastEditors: 周洋 1430536748@qq.com
 * @LastEditTime: 2024-08-22 15:53:47
 * @version: 1.2.5
 * @Description: 行内表单
-->
<script setup lang="ts">
import { props } from '../props';
import { ModeEnum } from '@/enum/index';
const { FormItems, data, customClass, labelWidth } = defineProps(props);
import type { FormInstance } from 'element-plus';
const formRef = ref<FormInstance>();
const resetForm = () => {
    if (!formRef.value) return;
    formRef.value.resetFields();
};
defineExpose({
    resetForm
});
</script>
<template>
    <el-form ref="formRef" :inline="true" :model="data" :label-width="labelWidth" :class="customClass">
        <template v-for="item in FormItems">
            <el-form-item v-if="item.mode == ModeEnum.INPUT" :label="item.label" :prop="item.prop">
                <el-input v-model="data[item.prop]" :placeholder="item.placeholder" clearable
                    :style="{ width: item.width }" />
            </el-form-item>
            <el-form-item v-if="item.mode == ModeEnum.SELECT" :label="item.label" :prop="item.prop">
                <el-select-v2 v-model="data[item.prop]" :placeholder="item.placeholder" :options="item.options"
                    clearable :style="{ width: item.width }" />
            </el-form-item>
            <el-form-item v-if="item.mode == ModeEnum.RENDER" :label="item.label" :prop="item.prop">
                <template #default>
                    <component :is="item.render" />
                </template>
            </el-form-item>
        </template>
        <slot />
    </el-form>
</template>